<template>
    <view id="more" class="more">
        <image src="../../static/information_btn_Therefresh_default@3x.png" mode=""></image>
        <text>加载更多</text>
    </view>
</template>

<script>
	export default {
		data() {
			return {
                windowHeight:0,
                canLoadMore:false,
			}
		},
        watch:{
            canLoadMore(canLoadMore){
                if(canLoadMore){
                    this.getList(this.currentPage+1)
                }
            }
        },
		methods: {
            init(){
                const that = this;
                uni.getSystemInfo({success(info) {
                    that.windowHeight = info.windowHeight
                }})
            },
            onScroll(e){
                console.log('onScroll');
                const query = uni.createSelectorQuery().in(this);
                query.select('#more').boundingClientRect(data => {
                    this.canLoadMore = !!(data.top<this.windowHeight)
                }).exec()
            },
		},
        mounted() {
            this.init();
        }
	}
</script>

<style>
	.content{
        background: #F1F1F1;
        padding: 36rpx;
    }
    .panel{
        background: #fff;
        box-shadow:0px 2rpx 2rpx 0px rgba(204,204,204,0.25);
        display: flex;
        align-items: center;
        padding: 26rpx 30rpx;
        margin-bottom: 32rpx;
    }
    .panel:nth-of-type(2n){
        flex-direction: row-reverse;
    }
    .panel image{
        width: 50%;
        height: 320rpx;
        border-radius: 20rpx;
    }
    .panel .title{
        padding-left: 16rpx ;
        flex: 1;
    }
    .more{
        padding: 20rpx 0 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
        height: 50rpx;
    }
    .more image{
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
    }
    .more text{
        color: #fc0101;
    }
</style>
